<template>
  <div>
    <!-- 动态 class: 动态设置类名 -->
    <!-- 语法: 
      :class="{ 类名: 布尔值 }" 动态判断是否要应用对应的类名
      :class="['类名1', '类名2' ...]" 同时添加多个类名
    -->
    <p :class="{ yellow: age >= 18 }">我是一个开心的 p</p>
    <p :class="arr">我是一个开心的 p</p>

    <!-- 动态 style -->
    <!-- 语法:
      :style="{ css样式名: css样式值 }" 添加 css 样式
     -->
    <ul>
      <li :style="{ fontSize: size + 'px' }">我是一个可爱的 li</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      arr: ['yellow', 'red', 'green'],
      size: 36
    }
  }
}
</script>

<style>
.yellow {
  color: yellow
}
</style>